<template>
	<view class="custom-tab-bar">
		<view
			v-for="(item, index) in list"
			:key="index"
			class="tab-item"
			:class="{ active: current === index, 'publish-item': item.text === '' }"
			@click="switchTab(index)"
		>
			<image
				class="icon"
				:class="{ 'publish-icon': item.text === '' }"
				:src="current === index ? item.selectedIconPath : item.iconPath"
			></image>
			<text class="text">{{ item.text }}</text>
		</view>
	</view>
</template>

<script>
export default {
	created() {
		// 隐藏框架默认的 tabBar
		uni.hideTabBar();
	},
	props: {
		list: {
			type: Array,
			default: () => []
		},
		current: {
			type: Number,
			default: 0
		}
	},
	methods: {
		switchTab(index) {
			if (this.current !== index) {
				this.$emit("change", index);
			}
		}
	}
};
</script>

<style lang="scss">
.custom-tab-bar {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	height: 120rpx;
	display: flex;
	justify-content: space-around;
	align-items: center;
	background-color: #ffffff;
	box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.1);
	z-index: 100;
}

.tab-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 10rpx;
	transition: all 0.3s ease;
	color: #8e8e93;
}

.tab-item.active {
	color: #007aff;
}

.tab-item.publish-item {
	position: relative;
	top: -30rpx; /* 调整发布按钮的凸起高度 */
	background-color: #ffffff; /* 背景色与菜单栏一致 */
	border-radius: 50%; /* 圆形背景 */
	padding: 15rpx; /* 调整内边距 */
	box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.1); /* 添加阴影 */
	margin: 0 -10rpx; /* 调整发布按钮的左右间距 */
}

.icon {
	width: 50rpx;
	height: 50rpx;
	margin-bottom: 8rpx;
}

.icon.publish-icon {
	width: 70rpx; /* 调整发布图标大小 */
	height: 70rpx; /* 调整发布图标大小 */
}

.text {
	font-size: 24rpx;
}
</style> 